<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { showToast } from 'vant'

const router = useRouter()
const userStore = useUserStore()

// 智能客服相关状态
const isDragging = ref(false)
const startX = ref(0)
const startY = ref(0)
const currentX = ref(0)
const currentY = ref(0)
const isAttached = ref(true)

// 智能客服点击事件
const handleSmartServiceClick = () => {
  showToast({
    message: '智能客服功能还在开发中，敬请期待！',
    position: 'middle',
    duration: 2000
  })
}

// 开始拖拽
const handleTouchStart = (e: TouchEvent) => {
  e.preventDefault() // 防止默认行为
  isDragging.value = true
  isAttached.value = false
  const touch = e.touches[0]
  startX.value = touch.clientX - currentX.value
  startY.value = touch.clientY - currentY.value
  console.log('开始触摸拖拽:', touch.clientX, touch.clientY)
}

// 拖拽中
const handleTouchMove = (e: TouchEvent) => {
  e.preventDefault() // 防止默认行为
  if (!isDragging.value) return
  
  const touch = e.touches[0]
  currentX.value = touch.clientX - startX.value
  currentY.value = touch.clientY - startY.value
  
  // 限制在屏幕范围内
  const maxX = window.innerWidth - 70 // 按钮宽度
  const maxY = window.innerHeight - 70 // 按钮高度
  
  currentX.value = Math.max(0, Math.min(currentX.value, maxX))
  currentY.value = Math.max(0, Math.min(currentY.value, maxY))
  
  console.log('触摸拖拽中:', currentX.value, currentY.value)
}

// 结束拖拽
const handleTouchEnd = () => {
  if (!isDragging.value) return
  
  isDragging.value = false
  
  // 检查是否应该吸附到边缘
  const screenWidth = window.innerWidth
  
  // 如果靠近左边缘，吸附到左边
  if (currentX.value < screenWidth / 2) {
    currentX.value = 0
  } else {
    // 否则吸附到右边
    currentX.value = screenWidth - 70
  }
  
  isAttached.value = true
  console.log('触摸拖拽结束，吸附到:', currentX.value, currentY.value)
}

// 鼠标事件处理
const handleMouseDown = (e: MouseEvent) => {
  e.preventDefault() // 防止默认行为
  isDragging.value = true
  isAttached.value = false
  startX.value = e.clientX - currentX.value
  startY.value = e.clientY - currentY.value
  console.log('开始鼠标拖拽:', e.clientX, e.clientY)
}

const handleMouseMove = (e: MouseEvent) => {
  if (!isDragging.value) return
  
  currentX.value = e.clientX - startX.value
  currentY.value = e.clientY - startY.value
  
  // 限制在屏幕范围内
  const maxX = window.innerWidth - 70
  const maxY = window.innerHeight - 70
  
  currentX.value = Math.max(0, Math.min(currentX.value, maxX))
  currentY.value = Math.max(0, Math.min(currentY.value, maxY))
  
  console.log('鼠标拖拽中:', currentX.value, currentY.value)
}

const handleMouseUp = () => {
  if (!isDragging.value) return
  
  isDragging.value = false
  
  // 检查是否应该吸附到边缘
  const screenWidth = window.innerWidth
  
  // 如果靠近左边缘，吸附到左边
  if (currentX.value < screenWidth / 2) {
    currentX.value = 0
  } else {
    // 否则吸附到右边
    currentX.value = screenWidth - 70
  }
  
  isAttached.value = true
  console.log('鼠标拖拽结束，吸附到:', currentX.value, currentY.value)
}

// 监听窗口大小变化
const handleResize = () => {
  if (isAttached.value) {
    const screenWidth = window.innerWidth
    if (currentX.value < screenWidth / 2) {
      currentX.value = 0
    } else {
      currentX.value = screenWidth - 70
    }
  }
}

onMounted(() => {
  // 初始化位置（右侧中间，确保可见）
  currentX.value = window.innerWidth - 100
  currentY.value = window.innerHeight / 2 - 35
  
  console.log('智能客服按钮初始化位置:', currentX.value, currentY.value)
  console.log('窗口尺寸:', window.innerWidth, window.innerHeight)
  
  // 强制显示按钮
  setTimeout(() => {
    console.log('智能客服按钮应该显示在:', currentX.value, currentY.value)
  }, 1000)
  
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
})

// 功能提示
const showFeatureNotReady = () => {
  showToast({
    message: '功能开发中，敬请期待！',
    position: 'middle',
    duration: 2000,
    forbidClick: true
  })
}

const showRegistrationNotReady = () => {
  showToast({
    message: '门诊挂号功能正在开发中，敬请期待！',
    position: 'middle',
    duration: 2000,
    forbidClick: true
  })
}

const showPaymentNotReady = () => {
  showToast({
    message: '门诊缴费功能正在开发中，敬请期待！',
    position: 'middle',
    duration: 2000,
    forbidClick: true
  })
}

const goToProfile = () => {
  router.push('/profile')
}

// 健康咨询跳转
const goToHealthConsultation = () => {
  router.push('/health-consultation')
}

// 价目详情跳转
const goToPriceDetail = () => {
  router.push('/price-detail')
}

// 就医指南跳转
const goToMedicalGuide = () => {
  router.push('/medical-guide')
}
</script>

<template>
  <div class="home-container">
    <!-- 状态栏 -->
    <div class="status-bar">
      <span class="time">12:30</span>
      <div class="status-icons">
        <span class="signal">📶</span>
        <span class="wifi">📶</span>
        <span class="battery">🔋</span>
      </div>
    </div>

    <!-- 头部 -->
    <div class="header">
      <h1 class="platform-title">智慧医院平台</h1>
      <div class="header-icons">
        <span class="menu-icon">⋯</span>
        <span class="eye-icon">👁</span>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 健康生活横幅 -->
      <div class="health-banner">
        <div class="banner-content">
          <div class="banner-text">
            <h2>健康生活 轻松简单</h2>
          </div>
          <div class="banner-illustration">
            <div class="doctor">👨‍⚕️</div>
            <div class="syringe">💉</div>
            <div class="calendar">📅</div>
          </div>
        </div>
      </div>

      <!-- 快捷服务按钮 -->
      <div class="quick-service-buttons">
        <div class="service-button registration" @click="showRegistrationNotReady">
          <div class="button-icon">📅</div>
          <div class="button-text">
            <div class="button-title">门诊挂号</div>
            <div class="button-subtitle">便捷预约挂号</div>
          </div>
        </div>
        <div class="service-button payment" @click="showPaymentNotReady">
          <div class="button-icon">💰</div>
          <div class="button-text">
            <div class="button-title">门诊缴费</div>
            <div class="button-subtitle">便捷预约挂号</div>
          </div>
        </div>
      </div>

      <!-- 公告栏 -->
      <div class="announcement-bar" @click="showFeatureNotReady">
        <span class="announcement-label">公告</span>
        <span class="announcement-text">智慧医院上线啦,手机也能问诊医...</span>
        <span class="arrow">→</span>
      </div>

      <!-- 服务分类标签 -->
      <div class="service-tabs">
        <div class="tab active">门诊</div>
        <div class="tab" @click="showFeatureNotReady">住院</div>
        <div class="tab" @click="showFeatureNotReady">综合</div>
        <div class="more-tab" @click="showFeatureNotReady">更多</div>
      </div>

      <!-- 服务网格 -->
      <div class="service-grid">
        <div class="service-item" @click="showFeatureNotReady">
          <div class="service-icon">📋</div>
          <div class="service-name">门诊报告</div>
        </div>
        <div class="service-item" @click="showFeatureNotReady">
          <div class="service-icon">⏰</div>
          <div class="service-name">候诊查询</div>
        </div>
        <div class="service-item" @click="showFeatureNotReady">
          <div class="service-icon">📝</div>
          <div class="service-name">自助开单</div>
        </div>
        <div class="service-item" @click="showFeatureNotReady">
          <div class="service-icon">🔬</div>
          <div class="service-name">医技预约</div>
        </div>
        <div class="service-item" @click="showFeatureNotReady">
          <div class="service-icon">🔄</div>
          <div class="service-name">我的复诊</div>
        </div>
        <div class="service-item" @click="showFeatureNotReady">
          <div class="service-icon">🎫</div>
          <div class="service-name">自助取号</div>
        </div>
        <div class="service-item" @click="showFeatureNotReady">
          <div class="service-icon">📋</div>
          <div class="service-name">门诊导诊单</div>
        </div>
        <div class="service-item" @click="goToPriceDetail">
          <div class="service-icon">💰</div>
          <div class="service-name">价目详情</div>
        </div>
        <div class="service-item" @click="goToMedicalGuide">
          <div class="service-icon">📖</div>
          <div class="service-name">就医指南</div>
        </div>
      </div>

      <!-- 健康资讯 -->
      <div class="health-info-section">
        <div class="section-header">
          <h3>健康资讯</h3>
          <!-- 调试按钮 -->
          <button 
            @click="handleSmartServiceClick"
            style="background: #ff4757; color: white; border: none; padding: 8px 12px; border-radius: 20px; font-size: 12px; margin-left: 10px;"
          >
            测试客服
          </button>
        </div>
        <div class="article-preview" @click="goToHealthConsultation">
          <h4>世界糖尿病日,应该注意什么</h4>
          <p>糖尿病是一种常见的慢性疾病，需要长期管理...</p>
        </div>
      </div>
    </div>

    <!-- 智能客服按钮 -->
    <div 
      class="smart-service-button"
      :class="{ 'dragging': isDragging, 'attached': isAttached }"
      :style="{
        transform: `translate(${currentX}px, ${currentY}px)`,
        display: 'flex',
        position: 'fixed',
        zIndex: 9999
      }"
      @touchstart="handleTouchStart"
      @touchmove="handleTouchMove"
      @touchend="handleTouchEnd"
      @mousedown="handleMouseDown"
      @mousemove="handleMouseMove"
      @mouseup="handleMouseUp"
      @click="handleSmartServiceClick"
    >
      <div class="smart-service-icon">🤖</div>
      <div class="smart-service-text">智能客服</div>
    </div>

    <!-- 底部导航栏 -->
    <div class="bottom-nav">
      <div class="nav-item active">
        <div class="nav-icon">🏠</div>
        <div class="nav-text">诊疗首页</div>
      </div>
      <div class="nav-item" @click="showFeatureNotReady">
        <div class="nav-icon">☁️</div>
        <div class="nav-text">微官网</div>
      </div>
      <div class="nav-item" @click="showFeatureNotReady">
        <div class="nav-icon">💬</div>
        <div class="nav-text">消息中心</div>
      </div>
      <div class="nav-item" @click="goToProfile">
        <div class="nav-icon">👤</div>
        <div class="nav-text">我的</div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.home-container {
  min-height: 100vh;
  background: #f8f9fa;
  position: relative;
  padding-bottom: 80px;
}

/* 状态栏 */
.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background: white;
  font-size: 14px;
  color: #333;
}

.status-icons {
  display: flex;
  gap: 5px;
}

/* 头部 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: white;
  border-bottom: 1px solid #eee;
}

.platform-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin: 0;
}

.header-icons {
  display: flex;
  gap: 15px;
}

.menu-icon, .eye-icon {
  font-size: 20px;
  cursor: pointer;
}

/* 主要内容区域 */
.main-content {
  padding: 20px;
}

/* 健康生活横幅 */
.health-banner {
  background: linear-gradient(135deg, #4CAF50, #45a049);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  color: white;
}

.banner-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.banner-text h2 {
  margin: 0;
  font-size: 20px;
  font-weight: bold;
}

.banner-illustration {
  display: flex;
  align-items: center;
  gap: 10px;
}

.doctor, .syringe, .calendar {
  font-size: 24px;
}

/* 快捷服务按钮 */
.quick-service-buttons {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}

.service-button {
  flex: 1;
  background: white;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.service-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.registration {
  background: linear-gradient(135deg, #2196F3, #1976D2);
  color: white;
}

.payment {
  background: linear-gradient(135deg, #00BCD4, #0097A7);
  color: white;
}

.button-icon {
  font-size: 24px;
}

.button-text {
  flex: 1;
}

.button-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
}

.button-subtitle {
  font-size: 12px;
  opacity: 0.9;
}

/* 公告栏 */
.announcement-bar {
  background: #f5f5f5;
  padding: 15px 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  cursor: pointer;
}

.announcement-label {
  background: #e0e0e0;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  color: #666;
}

.announcement-text {
  flex: 1;
  font-size: 14px;
  color: #333;
}

.arrow {
  color: #999;
  font-size: 16px;
}

/* 服务分类标签 */
.service-tabs {
  display: flex;
  margin-bottom: 20px;
  background: white;
  border-radius: 8px;
  overflow: hidden;
}

.tab {
  flex: 1;
  padding: 15px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  border-bottom: 3px solid transparent;
}

.tab.active {
  color: #2196F3;
  border-bottom-color: #2196F3;
  background: #f0f8ff;
}

.more-tab {
  padding: 15px 20px;
  text-align: center;
  cursor: pointer;
  color: #666;
}

/* 服务网格 */
.service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  margin-bottom: 30px;
}

.service-item {
  background: white;
  border-radius: 8px;
  padding: 20px 10px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.service-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.service-icon {
  font-size: 24px;
  margin-bottom: 8px;
}

.service-name {
  font-size: 12px;
  color: #333;
  line-height: 1.2;
}

/* 健康资讯 */
.health-info-section {
  background: white;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.section-header h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.article-preview {
  cursor: pointer;
}

.article-preview h4 {
  margin: 0 0 10px 0;
  font-size: 16px;
  color: #333;
}

.article-preview p {
  margin: 0;
  font-size: 14px;
  color: #666;
  line-height: 1.4;
}

/* 智能客服按钮 */
.smart-service-button {
  position: fixed;
  width: 70px;
  height: 70px;
  background: #ff4757;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  cursor: grab;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  transition: all 0.3s ease;
  user-select: none;
  touch-action: none;
  border: 3px solid white;
}

.smart-service-button:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  cursor: grab;
}

.smart-service-button.dragging {
  opacity: 0.9;
  transform: scale(1.2);
  cursor: grabbing;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
}

.smart-service-button.attached {
  transition: transform 0.3s ease;
  cursor: grab;
}

.smart-service-icon {
  font-size: 24px;
  margin-bottom: 4px;
  pointer-events: none;
}

.smart-service-text {
  font-size: 10px;
  text-align: center;
  line-height: 1;
  font-weight: bold;
  pointer-events: none;
}

/* 底部导航栏 */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  display: flex;
  padding: 10px 0;
  border-top: 1px solid #eee;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
}

.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.nav-item.active {
  color: #2196F3;
}

.nav-item:hover {
  color: #2196F3;
}

.nav-icon {
  font-size: 20px;
}

.nav-text {
  font-size: 12px;
}

/* 自定义Toast样式 */
:deep(.van-toast) {
  background: rgba(0, 0, 0, 0.8);
  color: white;
  border-radius: 8px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 500;
}

:deep(.van-toast--middle) {
  top: 50%;
  transform: translateY(-50%);
}
</style>
